1.1 Slide Header

• 슬라이드 헤더는 어떻게 붙이는가?
• 좋은 애드온이 있다. 애드온에 대한 설명은 아래 참고
• reveal-header

• 커스터마이즈를 위해서는 css를 수정하면 된다.
  • 아래는 --my-brightness를 조절해 섹션 헤더의 밝기를 조절하는 코드다.

.reveal-header .sc-title p,
.reveal-header .sb-title p {
  font-size: max(15px, 1.45vw);
  /* font-size: max(10px, 1.45vw); */
  filter: brightness(var(--my-brightness));
}

• 마지막 페이지에서 헤더가 이상하게 뜨는 버그가 있다.
  • 아직 해결책을 찾지 못했다…
  • 원래 의도는 --my-brightness를 조절해 헤더를 표시되지 않게 해보려 했다.

2.1 CSS what, where

• scss든 css든 불러올 수 있다.
• 가장 문제가 되는 것은 위치
  • 만일 본문에 관련된 것이라면 css: [...]로 preamble에 넣으면 된다.
  • 헤더나 푸터와 관련된 것이라면 theme: [...]에 함께 넣어야 한다.

• 현재 이 슬라이드에는 customs.scss(LINK)가 적용되어 있다.
  • .reveal .reveal-header .sc-title 설정
  • .reveal .footer 설정
  • 제목에서 본문까지 거리 조절
  • 캡션 텍스트 가운데 정렬

2.2 CSS working?

• customs.scss에 있는 내용이 잘 작동하는가?
  • css에서 그림의 캡션이 가운데로 오도록 정렬했다.

3.1 배경색 조정하기

• theme-dark.scss를 테마에 포함한다.
• 올 블랙이 부담스러워서 조금 톤다운을 했다.

$body-bg: #303030;

3.2 Numbering section

• yml에서 설정해주면 된다.

number-sections: true

• # 제목 뒤에 {} 안에 설정하면 개별 슬라이드에서 통제 가능하다.
  • .unlisted: toc에서 뺀다.
  • .unnumbered: 번호를 뺀다.

3.3 footer 로고 크기 변경

• customs.scss에 아래와 같이 설정했다.

.reveal .slide-logo {
    height: 80px !important;
    width: 250px !important;
    max-width: unset !important;
    max-height: unset !important;
  }

3.4 단어 색깔 바꾸기

• 단어 하나의 색깔만 바꿔보자.
• 다른 형식은 바뀌지 않아야 한다.
• How does it look like in English?